<template>
	<view class="container flex--row" :style="{height:height+'%'}">
		<map :style="{width: '100%', height: '100%'}" 
			:longitude="locatePosition.pointX" 
			:latitude="locatePosition.pointY" 
			:polyline="polylines"
			:markers="covers"
			:scale="17"
			></map>
	</view>
</template>

<script>
	import {checkRole} from "@/core/app.js"
	import * as Role from "@/core/constant/role"
	
	export default {
		data(){
			return {
				covers:[],
				polylines:[],
			}
		},
		props:{
			height:{
				type:Number,
				default:100
			},
			userPosition:{
				type:Object,
			},
			volunteerPosition:{
				type:Object,
			},
			attractionPositions:{
				type:Array,
				default:[]
			},
			locatePosition:{
				type:Object,
				required:true
			}
		},
		watch:{
			volunteerPosition(){
				console.log("志愿者位置变化了")
				this.refreshCovers()
				this.refreshPolylines()
			},
			userPosition(){
				console.log("盲人位置变化了")
				this.refreshCovers()
				this.refreshPolylines()
			},
			deep:true
		},
		methods:{
			refreshCovers(){
				let points = []
				if(this.volunteerPosition && this.userPosition){
					points.push(this.processMarker(0,this.userPosition))
					points.push(this.processMarker(1,this.volunteerPosition))
				}
				
				if(this.attractionPositions.length > 0){
					for(const [index,position] of Object.entries(this.attractionPositions)){
						points.push(this.processMarker(index+points.length,position))
					}
				}
				this.covers = points
			},
			refreshPolylines(){
				let lines = []
				if(this.volunteerPosition && this.userPosition){
					lines.push(this.processLine(1,[this.userPosition,this.volunteerPosition]))
				}
				if(this.volunteerPosition && this.userPosition && this.attractionPositions.length > 0){
					lines.push(this.processLine(2,[this.volunteerPosition,this.attractionPositions[0]]))
				}
				if(this.attractionPositions.length > 0){
					lines.push(this.processLine(3,this.attractionPositions))
				}
				this.polylines = lines 
			},
			processMarker(id,position){
				
				const point = {
					id:id,
					longitude:+position.pointX,
					latitude:+position.pointY,
					iconPath:position.img ?? "../../static/images/outdoors.png",
					width:30,
					height:30,
					callout:{
						content:position.name,
						display:'ALWAYS',
					}
				}
				return point
			},
			processLine(id,positionList){
				
				const points = []
				for(const point of positionList){
					points.push({
						longitude:(+point.pointX),
						latitude:(+point.pointY)
					})
				}
				const line = {
					id,
					arrowLine:true,
					color: id === 1 ?"#e77e06e6":"#27bd09e6",
					width:3,
					points
				}
				return line
			}
		},
		mounted(){
			this.refreshCovers()
			this.refreshPolylines()
		}
	}
</script>

<style lang="scss" scoped>
	 .container{
			height: 1200rpx;
	        @include border-four-roundings
			overflow: hidden;
			
			padding: 4px;
			
			justify-content: center;
	    }
</style>